<template>
<!--  前台首页-->
  <div class="container" style="">
    <!--banner-->

    <Banner></Banner>
    <!--  新品推荐-->

    <Recommend/>
<!--    图片细节-->
    <ImgDetail/>
  </div>
</template>
<script>
import axios from "axios";
import Banner from "@/views/front/components/banner.vue";
import Recommend from "@/views/front/components/recommend.vue";
import ImgDetail from "@/views/front/components/imgDetail.vue";

export default {
  name: "fHome",
  components: {ImgDetail, Recommend, Banner},
  data(){
    return{
      items: [],
      defaultImg:'../../assets/items/1.png'
    }
  },
  methods:{
    fetchProducts() {
      axios.get('/item/findRecommend')
          .then(response => {
            this.items = response.data.map(item => ({
              ...item,
              imgUrl: '/assets/items/' + item.imgUrl
            }));
          })
          .catch(error => {
            console.error('There was an error fetching the items:', error);
          });
    },
    addToCart(item) {
      // 加入购物车的逻辑
      console.log('Added to cart:', item);
    },

  },
  created() {
    this.fetchProducts();
  },
}
</script>
<style scoped>
.container{
  background-color: white;
  margin:10px 0;
}
/*.rec {
  text-align: center; !* 设置文本居中 *!
  width: 80%;
  margin: auto;
}

.title {
  margin: 20px auto;
  width: 25%;
  border: 1px solid black;
  padding: 10px 0;
  font-size: 20px;
!*  margin-left: auto; !* 添加自动外边距实现水平居中 *!
  margin-right: auto; !* 添加自动外边距实现水平居中 *!*!
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.el-card {
  margin-bottom: 20px; !* 添加卡片底部间距 *!
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1); !* 添加卡片阴影 *!
}
.el-col{
  height: 300px;
//border: 1px solid red;
}
.image {
  //width: 100%; !* 使图片宽度充满卡片 *!
  display: block; !* 防止图片下方出现间隙 *!
}

.bottom {
  display: flex; !* 使用 Flexbox 布局 *!
  justify-content: space-between; !* 两端分布 *!
  align-items: center; !* 垂直居中 *!
  margin-top: 13px; !* 添加价格和按钮的顶部间距 *!
}

.price {
  font-size:20px; !* 调整价格字体大小 *!
  color: #999; !* 调整价格颜色 *!
}

.button {
  padding: 0; !* 移除按钮的内边距 *!
  float: right; !* 将按钮右浮动 *!
}

.clearfix:before,
.clearfix:after {
  display: table; !* 清除浮动 *!
  content: "";
}

.clearfix:after {
  clear: both;
}
.button {
  text-align: center;
  font-size: 25px;
  padding: 10px; !* 增加一些内边距，确保图标和文字不会紧贴边缘 *!
  color: #42b983; !* 默认颜色 *!
  margin-left: 50px;
  width: 40px; !* 设置按钮宽度 *!
  height: 40px; !* 设置按钮高度 *!
  border-radius: 50%; !* 设置边框半径为50%，使按钮成为圆形 *!
  display: inline-flex; !* 使用flex布局，确保内容居中 *!
  align-items: center; !* 垂直居中 *!
  justify-content: center; !* 水平居中 *!
  transition: all 0.3s; !* 平滑过渡效果 *!
  border: none; !* 移除边框，如果需要可以设置边框 *!
}

.button:hover {
  color: #ffffff; !* 鼠标悬停时改变文字颜色 *!
  background-color: #42b983; !* 鼠标悬停时改变背景颜色 *!
  cursor: pointer; !* 鼠标悬停时改变鼠标光标样式 *!
  box-shadow: 0 2px 12px rgba(66, 185, 131, 0.5); !* 鼠标悬停时添加阴影 *!
}*/
</style>
